<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <TodoHeader :addTodo="addTodo" />
      <TodoList :todos="todos" :updateTodoIsDone="updateTodoIsDone"/>
      <TodoFooter />
    </div>
  </div>
</template>

<script>
import TodoHeader from "./views/TodoHeader";
import TodoList from "./views/TodoList";
import TodoFooter from "./views/TodoFooter";

export default {
  name: "App",
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
  data() {
    return {
      todos: [
        { id: 1, name: "吃饭", isDone: false },
        { id: 2, name: "睡觉", isDone: false },
        { id: 3, name: "敲代码", isDone: true },
      ],
    };
  },
  methods: {
    // 添加todo
    addTodo(name) {
      this.todos.push({
        id: Date.now(),
        name,
        isDone: false,
      });
    },
    // 修改todo的选中状态
    updateTodoIsDone(id) {
      /*
        push 往数组末尾添加元素
        pop 删除数组末尾元素
        shift 删除数组首项元素
        unshift 往数组最前面添加元素

        slice 截取一段数组
        splice 添加、删除、替换元素
        join 将数组拼成一个字符串
        sort 排序
        reverse 反转数组

        forEach 遍历数组
        map 返回一个新数组，长度不变值变
        filter 返回一个新数组，长度变（减少）值不变
        reduce 累加、求和、统计
        some 只要有一个为true就返回true, 所有false才返回false
        every 只要有一个为false就返回false, 所有true才返回true
        find 查找一个元素（找到返回这个元素，没有找到undefined）
        findIndex 查找一个元素下标（找到返回这个元素下标，没有找到-1）

        includes 判断元素是否包含（返回布尔值）
        indexOf 判断元素是否包含（返回下标）
      */
      const todo = this.todos.find((todo) => todo.id === id);
      todo.isDone = !todo.isDone;
    },
  },
};
</script>

<style>
/*base*/
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
